<template>
  <div class="container">
    <el-dialog title="题目预览" :visible="dialogVisible" width="52%" :before-close="handleClose" @open="openDetail">
      <el-row>
        <el-col :span="6">
          <el-descriptions>
            <el-descriptions-item label="【题型】">
              {{ tableTypeFilters(questionType, questionsDetailList.questionType) }}
            </el-descriptions-item>
          </el-descriptions>
        </el-col>
        <el-col :span="6">
          <el-descriptions>
            <el-descriptions-item label="【编号】">
              {{ questionsDetailList.id }}
            </el-descriptions-item>
          </el-descriptions>
        </el-col>
        <el-col :span="6">
          <el-descriptions>
            <el-descriptions-item label="【难度】">
              {{ tableTypeFilters(difficulty, questionsDetailList.difficulty) }}
            </el-descriptions-item>
          </el-descriptions>
        </el-col>
        <el-col :span="6">
          <el-descriptions>
            <el-descriptions-item label="【标签】">
              {{ questionsDetailList.tags }}
            </el-descriptions-item>
          </el-descriptions>
        </el-col>
        <el-col :span="6">
          <el-descriptions>
            <el-descriptions-item label="【学科】">
              {{ questionsDetailList.subjectName }}
            </el-descriptions-item>
          </el-descriptions>
        </el-col>
        <el-col :span="6">
          <el-descriptions>
            <el-descriptions-item label="【目录】">
              {{ questionsDetailList.directoryName }}
            </el-descriptions-item>
          </el-descriptions>
        </el-col>
        <el-col :span="6">
          <el-descriptions>
            <el-descriptions-item label="【方向】">
              {{ questionsDetailList.direction }}
            </el-descriptions-item>
          </el-descriptions>
        </el-col>
      </el-row>
      <el-divider></el-divider>
      <div>
        【题干】:
        <div style="color: blue" v-html="questionsDetailList.question"></div>
        <div v-for="item in questionsDetailList.options" :key="item.id" class="radio-bottom">
          <!-- 单选框 -->
          <el-radio v-if="questionsDetailList.questionType === '1'" :value="isRight" :label="item.isRight">{{
            item.title
          }}</el-radio>
          <!-- 多选框 -->
          <el-checkbox v-if="questionsDetailList.questionType === '2'" :value="item.isRight ? true : false">
            {{ item.title }}
          </el-checkbox>
        </div>
      </div>
      <el-divider></el-divider>
      <el-descriptions>
        <el-descriptions-item label="【参考答案】">
          <el-button @click="videoShow" type="danger" size="small">视频答案预览</el-button>
        </el-descriptions-item>
      </el-descriptions>
      <!-- 视频 -->
      <!-- meta 删除http head中的referer 不让第三方网站拦截 播放视频 -->
      <meta name="referrer" content="never" />
      <video
        ref="RefVideo"
        class="video"
        preload="meta"
        controls="controls"
        v-if="isShowVideo"
        :src="questionsDetailList.videoURL"
      ></video>
      <el-divider></el-divider>
      【答案解析】:
      <span v-html="questionsDetailList.answer" style="display: inline-block"></span>
      <!-- <el-descriptions>
        <el-descriptions-item label="【答案解析】" v-html="questionsDetailList.answer">
          <!- - 直接使用 replace方法替换 html 标签 会报错 因为answer 不一定有值 所以使用了 可选链操作符 - ->
          {{questionsDetailList.answer?.replace(/&lt;[^>]+>/g, '')}}
        </el-descriptions-item>
      </el-descriptions> -->
      <el-divider></el-divider>
      <el-descriptions>
        <el-descriptions-item label="【题目备注】">{{ questionsDetailList.remarks }}</el-descriptions-item>
      </el-descriptions>

      <span slot="footer" class="dialog-footer" style="display: flex; justify-content: flex-end">
        <el-button type="primary" @click="handleClose">关闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { questionsDetailApi } from '@/api/hmmm/questions.js'
import { questionType, difficulty } from '@/api/hmmm/constants.js'
export default {
  props: {
    dialogVisible: {
      type: Boolean,
      default: false
    },
    // 当前行id
    previewId: {
      type: [Number, String],
      required: true
    }
  },
  data () {
    return {
      // 题详情
      questionsDetailList: {},
      answerList: [],
      isRight: 1,
      isShowVideo: false,
      // 题型 难度
      questionType,
      difficulty
    }
  },
  methods: {
    // 关闭对话框
    handleClose () {
      this.$emit('update:dialogVisible', false)
      // 关闭对话框时关闭视频播放
      this.$refs.RefVideo.pause()
    },
    // 对话框打开回调
    openDetail () {
      this.questionsDetail()
    },
    // 获取详情数据
    async questionsDetail () {
      try {
        const { data: res } = await questionsDetailApi({ id: this.previewId })
        // 给详情列表赋值
        this.questionsDetailList = res
      } catch (error) {
        // 后台数据有错误 所以当抛出错误时 给详情列表赋值假数据
        this.questionsDetailList = {
          questionType: '1',
          id: 34,
          difficulty: '2',
          tags: '青玉案',
          subjectName: '前端',
          directoryName: 'ERN',
          direction: '企业服务',
          question: '<p>东风夜放花千树<p>',
          options: [
            { code: 'D', id: 148, img: '', isRight: 0, questionsID: 33, title: '更吹落,星如雨' },
            { code: 'C', id: 147, img: '', isRight: 0, questionsID: 33, title: '宝马雕车香满路' },
            { code: 'B', id: 146, img: '', isRight: 0, questionsID: 33, title: '蛾儿雪柳黄金缕' },
            { code: 'A', id: 145, img: '', isRight: 1, questionsID: 33, title: '笑语盈盈暗香去' }
          ],
          videoURL: 'http://vfx.mtime.cn/Video/2021/07/10/mp4/210710122716702150.mp4',
          answer: '<p>众里寻他千百度，蓦然回首，那人却在，灯火阑珊处<p>',
          remarks: '233333'
        }
      }
    },
    // 题型和难度
    tableTypeFilters(enumObj, data) {
      // 接口返回的 标识码是 字符串的 不能用全等
      // 拿到与当前表格数据相同的枚举
      const res = enumObj.find(item => item.value == data)
      return res ? res.label : '未知'
    },
    // 视频按钮
    videoShow () {
      this.isShowVideo = !this.isShowVideo
    }
  }
}
</script>

<style scoped lang="scss">
::v-deep.el-divider {
  background-color: #333;
}
.radio-bottom {
  margin-bottom: 10px;
}
.video {
  margin-top: 10px;
  width: 400px;
  height: 300px;
}
</style>
